{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="preload" as="style" onload="this.rel='stylesheet'" crossorigin="anonymous"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"/>
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.2/dist/iconify-icon.min.js"></script>
  <link rel="preload" as="style" href="{% static "main/css/index.css" %}" onload="this.rel='stylesheet'"/>
  {% block head %}
    <title> Find Teammates </title>
  {% endblock %}
</head>
<body>
<header class="sticky-top">
  <nav class="navbar navbar-expand-lg p-2 py-3">
    <div class="container-fluid">
      <a href="/" class="btn btn-outline-primary border-0 fw-bold" id="logo">
        <iconify-icon inline icon="fluent:people-32-filled"></iconify-icon>
        Find Teammates
      </a>
      <div class="d-flex flex-grow-0 gap-4">
        <ul class="navbar-nav">
          <li class="nav-item"><a href="{% url "index" %}" class="nav-link">首页</a></li>
          <li class="nav-item"><a href="{% url "index" %}" class="nav-link">寻找项目</a></li>
          <li class="nav-item"><a href="{% url "index" %}" class="nav-link">投融资</a></li>
          <li class="nav-item"><a href="{% url "index" %}" class="nav-link">比赛报名</a></li>
        </ul>
        <form role="search" class="d-flex" action="{% url "index" %}">
          <div class="input-group">
            <span class="input-group-text"> <iconify-icon icon="line-md:search-twotone"> </iconify-icon> </span>
            <input class="form-control" type="search" placeholder="搜索" aria-label="Search">
            <button class="input-group-text btn bg-dark-subtle border-0" type="submit" title="search">
              <iconify-icon icon="line-md:arrow-small-right"></iconify-icon>
            </button>
          </div>
          <script>
            const buttonClasses = document.querySelector("button[title=search]").classList;
            document.querySelector("input[aria-label=Search]").addEventListener("input", (ev) => {
              if (ev.target.value) {
                buttonClasses.add("text-bg-success");
                buttonClasses.remove("bg-dark-subtle");
              } else {
                buttonClasses.add("bg-dark-subtle");
                buttonClasses.remove("text-bg-success");
              }
            })
          </script>
        </form>
      </div>
      <div class="d-flex flex-row gap-1">
        {% if user.is_authenticated or request.user.is_authenticated %}
          <a class="btn btn-sm btn-primary mx-1" href="{% url "publish" %}">
            <iconify-icon inline icon="line-md:upload-loop"></iconify-icon>
            发布
          </a>
          <a class="btn btn-sm btn-outline-primary mx-1">
            <iconify-icon inline icon="mingcute:notification-line"></iconify-icon>
            消息
          </a>
          <a class="btn btn-sm btn-outline-primary mx-1">
            <iconify-icon inline icon="mingcute:message-3-line"></iconify-icon>
            私信
          </a>
          <a href="{% url "profile" %}" class="ms-1">
            {% if avatar %}
              <img src="{% static avatar | safe %}" alt="avatar" class="rounded-circle" height="32" width="32">
            {% else %}
              <img src="{% static request.user.avatar | safe %}" alt="avatar" class="rounded-circle" height="32" width="32">
            {% endif %}
          </a>
        {% else %}
          <a href="{% url "register" %}" class="mx-1 btn btn-sm btn-primary">
            <iconify-icon inline icon="line-md:sunny-outline-twotone-loop"></iconify-icon>
            立即注册
          </a>
          <a href="{% url "login" %}" class="ms-1 btn btn-sm btn-outline-primary">
            登录
          </a>
        {% endif %}
      </div>
    </div>
  </nav>
  <script>
    const navClasses = document.querySelector("nav").classList;
    const shadow = "shadow"
    window.addEventListener("scroll", () => window.scrollY ? navClasses.add(shadow) : navClasses.remove(shadow));
  </script>
</header>

<main>
  {% block main %}
  {% endblock %}
</main>
</body>
</html>